<template>
	<view class="page content-20">
		<view class="notes-wrap" v-if="items.length > 0">
			<view class="notes-item item-box" v-for="(item, index) in items" :key='item.id'>
				<image class="item-img avatar" :src="item.pet.avatar | avatar" mode=""></image>
				<view class="item-info">
					<view class="user-nick">
						<text class="uc">办证爱宠：{{item.pet.nickName}}</text>
						<text v-if='!item.petIdCardImg'>办理中</text>
						<text v-else class="btns" @click="viewDogCard(item.petIdCardImg)">查看犬证</text>
					</view>
					
					<view class="img-wrap" >
						<view class="img-item">
							<image  class="img" @click="previewImg(item, 0)" :src="item.masterIDCardImgA" mode="aspectFill"></image>
							<view class="text-overflow name">主人身份证正面</view>
						</view>
						<view class="img-item">
							<image  class="img" @click="previewImg(item, 1)" :src="item.masterIDCardImgB" mode="aspectFill"></image>
							<view class="text-overflow name">主人身份证反面</view>
						</view>
						<view class="img-item">
							<image  class="img" @click="previewImg(item, 2)" :src="item.petImgA" mode="aspectFill"></image>
							<view class="text-overflow name">宠物正面照片</view>
						</view>
						<view class="img-item">
							<image  class="img" @click="previewImg(item, 3)" :src="item.petImgB" mode="aspectFill"></image>
							<view class="text-overflow name">宠物侧面照片</view>
						</view>
						<view class="img-item">
							<image  class="img" @click="previewImg(item, 4)" :src="item.masterAndPetImg" mode="aspectFill"></image>
							<view class=" text-overflow name">宠物和主人合照</view>
						</view>
						<view class="img-item" v-if="item.petIdCardImg">
							<image  class="img" @click="previewImg(item, 5)" v-if="item.petIdCardImg" :src="item.petIdCardImg" mode="aspectFill"></image>
							<view class="text-overflow name">犬证</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="empty" v-else>
			<u-empty mode='data' text='您还没有办理过电子犬证~'></u-empty>
		</view>
		
		<u-popup v-model="isShowPop" mode="center" border-radius="14"  :closeable='true'>
			<view class="pop-content">
				<view class="dog-card" >
					<image class="img" :src="currentDogCard" mode="aspectFit"></image>
				<!-- 	<view class="btn btn-save" @click="saveImg">保存图片</view> -->
				</view>
			</view>
		</u-popup>
		
		<view v-if="items.length <= 0" class="circular-submit circular-submit-pop" @click="$link('/pagesMain/dogCard/dogCard')">去办理</view>
		<view v-else class="circular-submit circular-submit-pop" @click="$link('/pagesMain/dogCard/dogCard')">再次办理</view>
		
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
			return {
				items: [],
				isShowPop: false,
				currentDogCard: 'http://qny.dqword.com/376aa2819bb94809b578ae1d1aee5bcb.jpg'
			}
		},
		
		onLoad() {
			this.pageSize = common.pageSize
			if(!this.$isLogin()) {
				login.uniLogin()
			}
		},
		
		onShow() {
			this.getItems()
		},
		
		methods: {
			getItems() {
				api.getUserAccreditationList({ },(res) => {
					 this.items = res
				}) 
			},
			
			previewImg(item, index) {
				let urls = [item.masterIDCardImgA, item.masterIDCardImgB, item.petImgA, item.petImgB, item.masterAndPetImg ]
				if(item.petIdCardImg) {
					urls.push(item.petIdCardImg)
				}
				console.log(index);
				uni.previewImage({
					current: index,
					urls
				})
			},
			
			viewDogCard(img) {
				this.currentDogCard = img
				this.isShowPop = true
			},
			
			saveImg() {
				uni.showLoading({
					title: '图片下载中...'
				})
				const that = this
				uni.downloadFile({
					url: that.currentDogCard,
					success: (res) => {
						uni.hideLoading()
						console.log(res);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res2) => {
								that.$showToast('保存成功~')
								that.isShowPop = false
							}
						})
					},
					fail: () => {
						uni.hideLoading()
						that.isShowPop = false
						that.$showToast('图片下载失败~')
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.notes-item{
		padding-bottom: 30upx;
		margin-bottom: 30upx;
		align-items: flex-start;
		border-bottom: 1px solid $border-color;
	}
	.item-info{
		flex-direction: column;
		align-items: flex-start;
		overflow: hidden;
		padding: 0 10upx;
		padding-right: 0;
	}
	.user-nick{
		color: #5f708a;
		font-size: $font-size-30;
		font-weight: bold;
		margin-bottom: 10upx;
		@include flex-base;
		justify-content: space-between;
	}
	.avatar{
		width: 80upx;
		height: 80upx;
	}
	.img-wrap{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		.img-item{
			width: 32%;
			margin-bottom: 20upx;
			margin-right: 1%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.name{
			font-size: $font-size-24;
		}
		.img{
			display: block;
			max-height: 196upx;
			width: 100%;
			background: rgba(0,0,0,0.1);
			border-radius: 5px;
			border: 1px solid #eee;
			box-sizing: border-box;
		}
		.img:last-child{
			margin-right: 0;
		}
	}
	.btns{
		height: 50upx;
		background-color: $theme-color;
		border-radius: 50upx;
		padding: 0 30upx;
		display: flex;
		line-height: 50upx;
		justify-content: center;
		align-content: center;
		color: #fff;
		font-size: $font-size-24;
	}
	.btn-save{
		background-color: $theme-color;
		width: 150upx;
		margin: 30upx auto;
		border-radius: 10upx;
	}
</style>
